<div class="form-group">
    <label class="col-sm-2 control-label">商品规格</label>
</div>
{foreach name="attributeList" item="item"}
    <div class="form-group">
        <label class="col-sm-2 control-label">{$item.name}</label>
        <div class="col-sm-6">
            {foreach name="item['values']" item="value"}
                <button type="button" class="btn {if condition='in_array($value.id,$items_ids)'}btn-info{else/}btn-white{/if}" data-attr_id="{$item.id}" data-value_id="{$value.id}" style="margin-right:10px;">{$value.value}</button>
            {/foreach}
        </div>
    </div>
{/foreach}

<div class="hr-line-dashed"></div>
<div id="goods_spec_table2">

</div>

<script>
    // 按钮切换 class
    $("#ajax_attr_box button").click(function(){
        if($(this).hasClass('btn-info'))
        {
            $(this).removeClass('btn-info');
            $(this).addClass('btn-white');
        }
        else
        {
            $(this).removeClass('btn-white');
            $(this).addClass('btn-info');
        }
        ajaxGetSpecInput();
    });
    ajaxGetSpecInput();
    /**
     *  点击商品规格处罚 下面输入框显示
     */
    function ajaxGetSpecInput()
    {
        var attr_arr = {};// 用户选择的规格数组
        // 选中了哪些属性
        $("#ajax_attr_box  button").each(function(){
            if($(this).hasClass('btn-info'))
            {
                var attr_id = $(this).data('attr_id');
                var value_id = $(this).data('value_id');
                if(!attr_arr.hasOwnProperty(attr_id))
                    attr_arr[attr_id] = [];
                attr_arr[attr_id].push(value_id);
                console.log(attr_arr);
            }
        });
        ajaxGetSpecInput2(attr_arr); // 显示下面的输入框

    }

    /**
     * 根据用户选择的不同规格选项
     * 返回 不同的输入框选项
     */
    function ajaxGetSpecInput2(attr_arr)
    {

        var goods_id = "{:input('param.goods_id')}";
        $.ajax({
            type:'POST',
            data:{'attr_arr':attr_arr},
            url:"{:Url('Goods/ajaxGetSpecInput')}?goods_id="+goods_id,
            success:function(data){
                $("#goods_spec_table2").html('')
                $("#goods_spec_table2").append(data);
                hbdyg();  // 合并单元格
            }
        });
    }


    // 合并单元格
    function hbdyg() {
        var tab = document.getElementById("spec_input_tab"); //要合并的tableID
        var maxCol = 2, val, count, start;  //maxCol：合并单元格作用到多少列
        if (tab != null) {
            for (var col = maxCol - 1; col >= 0; col--) {
                count = 1;
                val = "";
                for (var i = 0; i < tab.rows.length; i++) {
                    if (val == tab.rows[i].cells[col].innerHTML) {
                        count++;
                    } else {
                        if (count > 1) { //合并
                            start = i - count;
                            tab.rows[start].cells[col].rowSpan = count;
                            for (var j = start + 1; j < i; j++) {
                                tab.rows[j].cells[col].style.display = "none";
                            }
                            count = 1;
                        }
                        val = tab.rows[i].cells[col].innerHTML;
                    }
                }
                if (count > 1) { //合并，最后几行相同的情况下
                    start = i - count;
                    tab.rows[start].cells[col].rowSpan = count;
                    for (var j = start + 1; j < i; j++) {
                        tab.rows[j].cells[col].style.display = "none";
                    }
                }
            }
        }
    }
</script>
